<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
//终极目的：找到一个办法，可以让项目执行之初就去调用服务器接口，服务器返回结果，将返回的结果放入到data中，在页面上显示data
export default{
	data(){
		return{
			name: '张三',
			message: 'hello world',
			color:'color:red',
			num:'1',
			htmlStr:'<h2>我是h2标题</h2>',
			num1:4,
			
		}
	},
	methods:{
		changeName(){
			this.name = "哈哈哈"
		},
		changeNum1(){
			this.num1++
		}
	}
}
</script>

<template>
  <div>第一个vue应用</div>
  <!--插值  文本-->
 <p>{{name}}</p>
 <p>{{message}}</p>
 <p v-bind:style="color">红色</p>
 <!--插值  属性id name-->
 <p v-bind:id="num">我是id</p>
 <p :id="num">我是id2</p>
 <!--插值 文本-->
 <span>{{htmlStr}}</span>
 <span v-html="htmlStr"></span>
 
 <!--插值  JS表达式-->
 <h2>{{num1 + 1}}</h2>
 
 <button v-on:click="changeName">点我改名</button>
 
 <button @click="changeNum1">+</button>
 
 
</template>

<style scoped>

</style>
